<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:facelets="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push([ '_setAccount', 'UA-25161614-1' ]);
		_gaq.push([ '_trackPageview' ]);

		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl'
					: 'http://www')
					+ '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
		
		var time;
		var redirect;
		function timer() {
				time = setTimeout("alert('Su sesion ha expirado, por favor ingrese nuevamente')",
						1800000);
				redirect = setTimeout("window.location = 'http://www.sistemaocchi.com.ar';",
						1800001)
			}
		
		function updateTimer()
		{
			clearTimeout(timer);
			clearTimeout(redirect);
		}
		
		timer();
	</script>
	<link rel="stylesheet" href="/Poseidon/css/myStyle.css" type="text/css"
		media="all" />

</h:head>
<h:body>
	<f:event listener="#{employeeTasksBean.init}" type="preRenderView" />
	<h:form id="form">
		<f:attribute name="employeeId" value="5"></f:attribute>
		<p:ajaxStatus id="ajaxStatus"
			style="position-x:300px; position-y:300px; width:40px;height:40px;"
			onstart="statusDialog.show();" oncomplete="statusDialog.hide();" />


		<p:dialog modal="true" widgetVar="statusDialog" draggable="false"
			zindex="5" showHeader="false" styleClass="ui-ajax-dialog"
			closable="false" position="10" resizable="false;" height="120"
			width="70">
			<p:graphicImage style="margin-left:25px;"
				value="/images/ajax-loading-occhi.gif" />
		</p:dialog>



		<p:layout fullPage="true" style="min-width:400px;min-height:250px;"
			id="layout">

			<p:growl id="growl" />


			<p:layoutUnit position="west" size="230">
				<ui:include src="/pages/menu.xhtml" />
			</p:layoutUnit>


			<p:layoutUnit position="center">
				<div style="padding-left: 20%">
					<p:outputPanel id="tasksPanel">
						<p:dataTable var="task" id="table"
							value="#{employeeTasksBean.tasks}" widgetVar="tasksTable"
							binding="#{employeeTasksBean.tasksTable}" selectionMode="single"
							style="width:80%;">
							<p:ajax event="rowSelect"
								listener="#{employeeTasksBean.showCommentsForTask}"
								process="@this" update=":form:commentsPanel">
							</p:ajax>
							<p:column headerText="Tarea">
								<h:outputText value="#{task.name}" />
							</p:column>
							<p:column headerText="Responsable">
								<h:outputText value="#{task.employee.username}" />
							</p:column>
							<p:column headerText="Actividad">
								<h:outputText value="#{task.activity.name}" />
							</p:column>
							<p:column headerText="Descripcion">
								<h:outputText value="#{task.description}" />
							</p:column>
							
							<p:column headerText="%" style="width:30px;">
								<h:outputText value="#{task.progress}" />
							</p:column>

							<p:column headerText="Inicio">
								<h:outputText value="#{task.startDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>

							</p:column>
							<p:column headerText="Fin">
								<h:outputText value="#{task.finishDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" />
								</h:outputText>
							</p:column>
							
							<p:column>
								<p:commandButton id="button" process="@this" value="Modificar"
									style="visibility:block;" widgetVar="details"
									update=":form:addCommentPanel"
									actionListener="#{employeeTasksBean.updateProgress}"
									oncomplete="commentDialog.show();">
								</p:commandButton>
							</p:column>
							<f:facet name="header">
								<h:panelGrid id="tasksTableButtonContainer" columns="5">
									<p:graphicImage value="/images/+.png" width="70px"
										height="30px" id="myTasksImg" title="Agregar Nueva Tarea"
										onclick="document.getElementById('form:addTaskBtn').click()" />
									<p:graphicImage value="/images/mis_tareas.png" width="70px"
										height="30px" id="myTasksTaskImg" title="Ver Mis Tareas"
										onclick="document.getElementById('form:myTasksBtn').click()" />

									<p:graphicImage value="/images/vencidas.png"
										title="Ver Tareas Vencidas" width="70px" height="30px"
										id="dueTaskImg"
										onclick="document.getElementById('form:dueTaskBtn').click()" />

									<p:graphicImage value="/images/tareas75.png"
										width="70px" height="30px" id="approvedTaskImg"
										title="Mostrar Tareas para aprobar"
										onclick="document.getElementById('form:approveTaskBtn').click()" />

								</h:panelGrid>
							</f:facet>
						</p:dataTable>
						<p:commandButton value="Agregar Tarea" id="addTaskBtn"
							styleClass="ui-white-button" ajax="false" global="false"
							style="visibility:hidden;" action="new_task?faces-redirect=true"
							actionListener="#{tasksTableBean.newTask}" immediate="true"
							process="@this" />
						<p:commandButton value="Mis Tareas" id="myTasksBtn"
							style="visibility:hidden;" ajax="true" global="true"
							actionListener="#{employeeTasksBean.showMyTasks}"
							immediate="true" update=":form:tasksPanel :form:growl"
							process="@this" />
						<p:commandButton value="Tareas vencidas" id="dueTaskBtn"
							style="visibility:hidden;" ajax="true" global="true"
							actionListener="#{employeeTasksBean.showAllDueTasks}"
							immediate="true" update=":form:tasksPanel :form:growl"
							process="@this" />
						<p:commandButton value="Tareas a aprobar" id="approveTaskBtn"
							style="visibility:hidden;" ajax="true" global="true"
							actionListener="#{employeeTasksBean.showAllTasksToBeApproved}"
							update=":form:tasksPanel :form:growl" process="@this" />

					</p:outputPanel>
				</div>

			</p:layoutUnit>
			<p:layoutUnit position="south" size="230">
				<p:outputPanel id="commentsPanel">
					<h:graphicImage url="/images/headers/barra_comentarios.png" />
					<p:dataTable var="comment" value="#{employeeTasksBean.comments}">
						<p:column headerText="Actividad">
							<h:outputText value="#{comment.task.activity.name}" />
						</p:column>

						<p:column headerText="Comentario">
							<h:outputText value="#{comment.text}" />
						</p:column>
						<p:column headerText="Usuario">
							<h:outputText value="#{comment.employee.username}" />
						</p:column>
						<p:column headerText="Avance Previo">
							<h:outputText value="#{comment.beforeProgress}" />
						</p:column>
						<p:column headerText="Fecha">
							<h:outputText value="#{comment.date}">
								<f:convertDateTime type="both" dateStyle="short" />
							</h:outputText>
						</p:column>
					</p:dataTable>
				</p:outputPanel>
			</p:layoutUnit>
		</p:layout>
		<p:dialog header="Agregar Comentario" modal="true" id="dialog"
			widgetVar="commentDialog" resizable="false" width="500"
			closeOnEscape="true" showEffect="clip" hideEffect="fold"
			styleClass="font">
			<p:outputPanel id="addCommentPanel">
				<h:panelGrid columns="2" cellpadding="5" width="400">
					<h:outputLabel value="Tarea: " />
					<h:outputLabel value="#{employeeTasksBean.selectedTask.name} " />


					<h:outputLabel value="Avance: "></h:outputLabel>
					<h:outputText id="output"
						value="#{employeeTasksBean.selectedProgress}" />
					<h:inputHidden id="progress"
						value="#{employeeTasksBean.selectedProgress}" />
					<p:slider for="progress" step="25" display="output"
						style="width:200px" />
					<h:outputLabel value="Comentario: " />
					<p:inputTextarea style="width:300px;height:100px;"
						autoResize="true" value="#{employeeTasksBean.newComment.text}"
						id="text" required="true" requiredMessage="El comentario no ha sido agregado. Emita un comentario ademas de modificar el progreso" label="text" />
					<h:outputText value="Responsable: " style="float:left" />
					<p:selectOneMenu value="#{employeeTasksBean.selectedTask.employee}"
						style="width:170px" converter="employeeConverter"
						id="selectTaskEmployee" effect="fade" var="p">
						
						<f:selectItems id="employee" value="#{tasksTableBean.employees}"
							var="employee" itemLabel="#{employee.firstname}" 
							itemValue="#{employee}">
							</f:selectItems>
						<p:column>
							<p:graphicImage value="/#{p.image}" width="40" height="60" />
						</p:column>

						<p:column>  
			         	     #{p.firstname}   
			            </p:column>
					</p:selectOneMenu>

					<f:facet name="footer">
						<p:commandButton value="Guardar"
							update=":form:growl :form:text :form:tasksPanel :form:commentsPanel"
							oncomplete="commentDialog.hide(); tasksTable.clearSelection();"
							actionListener="#{employeeTasksBean.saveComment}">

						</p:commandButton>

					</f:facet>
				</h:panelGrid>
			</p:outputPanel>
		</p:dialog>
	</h:form>
</h:body>
</html>